/**
 * Copyright (c) 2021 zhaodongyang
   CurtainJs is licensed under Mulan PSL v2.
   You can use this software according to the terms and conditions of the Mulan PSL v2.
   You may obtain a copy of Mulan PSL v2 at:
            http://license.coscl.org.cn/MulanPSL2
   THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
   See the Mulan PSL v2 for more details.
 */

import prompt from '@system.prompt';
import commonlist from '../listsample/commonlist.js'
import commongrid from '../listsample/commongrid.js'

export default {
    data: {
        title: 'World',
        canvasColor: '#FF4455',
        canShow: false,
        isShowList: true,
    },
    onReady() {
        this.canShow = true
    },
    onShow() {
        const context = this
        if (this.isShowList) {
            setTimeout(function () {
                let roortView = context.$child('listContentView')
                commonlist.initHighLightData(roortView)
                context.beginShow(commonlist.data.canvasColor, commonlist.data.configList)
            }, 100)
        } else {
            setTimeout(function () {
                let roortView = context.$child('gridContentView')
                commongrid.initHighLightData(roortView)
                context.beginShow(commongrid.data.canvasColor, commongrid.data.configList)
            }, 100)
        }

    },
    changeTolist() {
        this.isShowList = true
        this.canShow = true
        this.onShow()
    },
    changeToGrid() {
        this.isShowList = false
        this.canShow = true
        this.onShow()
    },
    onBackPress() {
        const context = this
        if (context.canShow) {
            context.canShow = false
            return true
        } else {
            return false
        }
    },
    dissMiss() {
    },
    childToParentClicked(e) {
        const context = this
        context.canShow = e.detail.canShow
        let type = e.detail.type
        if (type == "showItem") {
            context.showItemHighLight(e)
        }
    },
    showItemHighLight(e) {
        const context = this
        try {
            context.canShow = e.detail.canShow
            context.canvasColor = e.detail.canvasColor
            let viewData = e.detail.list
            setTimeout(function () {
                context.beginShow(context.canvasColor, viewData)
            }, 100)

        } catch (err) {
            console.log("测试打印===showDrawerHighLight  err===" + err)
        }
    },
    beginShow(canvasColor, viewData) {
        try {
            const context = this
            let canvas = context.$element('hilightCanvas')
            let ctx = canvas.getContext('2d')
            //设置高亮背景色
            ctx.fillStyle = canvasColor
            let canvasWidth = canvas.getBoundingClientRect().width
            let canvasHeight = canvas.getBoundingClientRect().height
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
            ctx.fillRect(0, 0, canvasWidth, canvasHeight);
            if (viewData == null || viewData.length < 1) {
                return
            }
            // 绘制高亮部分
            for (var i = 0; i < viewData.length; i++) {
                let hightLightConfig = viewData[i]
                if (!hightLightConfig.isDraw) {
                    return
                }
                if (hightLightConfig.type == 'rect') {
                    ctx.clearRect(hightLightConfig.left, hightLightConfig.top, hightLightConfig.width, hightLightConfig.height);
                } else if (hightLightConfig.type == 'circle') {
                    let x = hightLightConfig.left + hightLightConfig.width / 2
                    let y = hightLightConfig.top + hightLightConfig.height / 2
                    let radius = hightLightConfig.width / 2
                    ctx.globalCompositeOperation = "destination-out"
                    ctx.beginPath()
                    ctx.arc(x, y, radius, 0, Math.PI * 2, false)
                    ctx.fillStyle = "#FFFFFF"
                    ctx.fill();
                    ctx.stroke();
                    ctx.globalCompositeOperation = "source-over";
                    //  ctx.clearRect(hightLightConfig.left, hightLightConfig.top, hightLightConfig.width, hightLightConfig.height);
                }
            }
        } catch (err) {
            console.log("测试打印===beginShow  err===" + err)
        }
    }
}
